<template>
	<view>
		<child :wenzi='text' @change='change'></child>
		{{title}}
		<swiper class="swbox" autoplay circular indicator-dots>
			<swiper-item>
				<image src="../../static/images/demo01/t2.jpg" mode=""></image>
			</swiper-item>
			<swiper-item>
				<image src="../../static/images/demo01/t3.jpg" mode=""></image>
			</swiper-item>
		</swiper>
		<scroll-view scroll-y="true" :scroll-top="scrollTop" @scroll="scroll" enable-flex>
			<view class="a"></view>
			<view class="b"></view>
			<view class="c"></view>
		</scroll-view>
		<view class="pic">
			<image style="width: 200px; height: 200px;" src="../../static/logo.png" mode="scaleToFill"></image>
		</view>
		<view class="text">
			<text>张三</text>
		</view>

		<view class="btn">
			<button type="default" size="mini">点击头像</button>
		</view>

		<view class="dingbu">
			<button type="default" size="mini" @tap="goTop">点击回到顶部</button>
		</view>
		
		<view class="shuzi">
			<text user-select decode selectable>可选择 &nbsp; &gt; &amp; &apos</text>
		</view>
		<view class="tupian">
			<!-- 图片可以使相对路径 小程序 只能是相对路径 绝对路径开发工具可以，真机不可以
				网站类型的绝对路径也可以 有默认值 宽 320 高240 默认拉伸填充完毕 scalToFIll
				aspectFit  保持比例 显示多的一方
				aspectFill 保持比例 显示少的一方
			 -->
		<!-- 	<image src="../../static/images/a3.JPG></image>
			<image src="../../static/images/a3.JPG></image> -->
			<image src="../../static/images/demo01/t2.jpg" mode="aspectFit"></image>
			<image src="../../static/images/demo01/t2.jpg" mode="aspectFill"></image>
			<rich-text nodes="<h1>你好</h1>"></rich-text>
			<rich-text nodes="<h3>可选择 &nbsp; &gt;<h3>"></rich-text>
		</view>
		
		
		
	</view>
</template>

<script>
	import child from '../../components/child.vue'
	export default {
		components: {
			child
		},
		data() { 
			return {
				text: '我是父组件传过来的值',
				title: '',
				scrollTop: 0,
			}
		},
		
		methods: {
			goTop:function(e){
				this.scrollTop = 0
				console.log(this.scrollTop)
			},
			scroll:function(e){
				this.scrollTop = e.detail.scrollTop
			},
			change(res) {
				console.log(res)
				this.title = res
			}
		}
	}
</script>

<style>
	scroll-view {
		height: 200px;
		width: 100px;
		border: 1px solid blue;
	}

	.a {
		height: 200px;
		width: 100px;
		background-color: #007AFF;
	}

	.b {
		height: 200px;
		width: 100px;
		background-color: #2C405A;
	}

	.c {
		height: 200px;
		width: 100px;
		background-color: #4CD964;
	}

	.swbox image {
		width: 100%;
	}

	.pic {
		/* height: 400px; */
		margin-top: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.text {
		text-align: center;
	}

	.btn {
		display: flex;
		justify-content: center;
	}
</style>
